<!--
 * @Author: [dengyih]
 * @Date: 2021-10-21 14:42:55
 * @LastEditors: [dengyih]
 * @LastEditTime: 2021-10-26 00:00:59
 * @Description: 
-->
<template>
  <div>
    <!-- 第一行开始 -->
    <div>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
          <!-- 时间 -->
          <div class="block">
            <el-date-picker value-format="timestamp" v-model="value" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
          </div>
          <!-- 时间结束 -->
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.type" placeholder="请选择类型" clearable>
            <el-option label="充值" value="充值"></el-option>
            <el-option label="收益" value="收益"></el-option>
            <el-option label="提现" value="提现"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.status" placeholder="请选择状态" clearable>
            <el-option label="正常" value="正常"></el-option>
            <el-option label="未审核" value="未审核"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一行结束 -->
    <!-- 表格开始 -->
    <div>
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="id" label="编号" width="180" align="center"> </el-table-column>
        <el-table-column prop="transferMoney" label="交易金额" width="180" align="center"> </el-table-column>
        <el-table-column prop="transferTime" label="交易时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.transferTime | filterTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="交易类型" align="center"> </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status === '正常'">正常</el-tag>
            <el-tag type="danger" v-else>未审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center"> </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[5, 10]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import { pageQuerySystemAccount } from '@/api/manger'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value: [],
      tableData: [],
      category: [],
      form: {},
      total: 0,
      params: {
        page: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.pageQueryCus()
  },
  methods: {
    //   给搜索按钮绑定事件 --模糊查询
    toSearch() {
      this.params.page = 1
      this.pageQueryCus()
    },
    // 查询表格信息
    async pageQueryCus() {
      let temp = {
        ...this.params,
        ...this.form
      }
      if (this.value) {
        temp.beginTime = this.value[0]
        temp.endTime = this.value[1]
      }
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      let res = await pageQuerySystemAccount(temp)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    handleSizeChange(pageSize) {
      //   console.log(`每页 ${val} 条`);
      this.params.pageSize = pageSize
      this.params.page = 1
      this.pageQueryCus()
    },
    //   处理当前页
    handleCurrentChange(page) {
      //   console.log(`当前页: ${val}`);
      this.params.page = page
      this.pageQueryCus()
    }
  }
}
</script>

<style></style>
